<template>
    <div class="container">
        <div class="top">
            <span class="count">年龄比例</span>
            <img src="@/assets/images/dataScreen-title.png" alt="">
        </div>
        <div class="main">
            <div class="pieEcharts" ref="pieEchartsEL"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    LabelLayout
]);

const pieEchartsEL = ref()

const pieEchartsFun = () => {

    // 指定图表的配置项和数据
    var data = [{
        name: "10-20岁",
        value1: "100",
        value2: "200"
    }, {
        name: "20-30岁",
        value1: "145",
        value2: "300"
    }, {
        name: "30-40岁",
        value1: "145",
        value2: "300"
    }, {
        name: "40-50岁",
        value1: "145",
        value2: "300"
    }, {
        name: "50-60岁",
        value1: "145",
        value2: "300"
    }, {
        name: "60-70岁",
        value1: "305",
        value2: "300"
    }];
    var nameList = [];
    var value1List = [];
    var value2List = [];
    var maxNum = 0;
    var tempNum;
    var tempValue1;
    var tempValue2;
    for (var i = 0; i < data.length; i++) {
        nameList.push(data[i].name);
        tempValue1 = data[i].value1;
        tempValue2 = data[i].value2;
        tempNum = tempValue1 - (-tempValue2);
        if (tempNum > maxNum) {
            maxNum = tempNum;
        }
        value1List.push(tempValue1);
        value2List.push(tempValue2);

    }
    let option = {
        title: {
            text: "各年龄段性别比例",
            x: "center",
            y: 0,
            textStyle: {
                color: "#d8d8d8",
                fontSize: 10,
                fontFamily: "Microsoft YaHei"
            }
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            },
            //formatter: "{b0}<br />{a0}:{c0}<br>{a1}{c1}"
        },
        toolbox: {
            show: !0,
            orient: "vertical",
            right: 5,
            itemSize: 22,
            feature: {}
        },
        grid: {
            right: "20%",
            left: "10%",
            borderWidth: 0,
            bottom: 20,  // 新增这行，设置距离底部为0
        },
        legend: {
            data: ["男", "女"],
            y: 10,
            x: '80%',
            textStyle: {
                color: "#e4e4e4",
                fontFamily: "Microsoft YaHei"
            }
        },
        calculable: !1,
        xAxis: [{
            type: "value",
            axisLine: {
                lineStyle: {
                    color: "#4a4a4a",
                    width: 1
                }
            },
            axisTick: {
                show: true
            },
            name: "单位：万",
            nameTextStyle: {
                color: "#e4e4e4"
            },
            axisLabel: {
                textStyle: {
                    color: "#e4e4e4",
                    fontFamily: "Microsoft yahei"
                }
            },
            max: Math.ceil(maxNum / 100) * 100,
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            name: "年龄段",
            nameTextStyle: {
                color: "#e4e4e4"
            },
            type: "category",
            axisLine: {
                lineStyle: {
                    color: "#4a4a4a",
                    width: 1
                }
            },
            axisLabel: {
                formatter: function (a) {
                    for (i in a)
                        return a.length > 5 ? a.substring(0, 4) + ".." : a
                },
                textStyle: {
                    color: "#e4e4e4",
                    fontFamily: "Microsoft yahei"
                }
            },
            axisTick: {
                show: !1
            },
            splitArea: {
                show: !1
            },
            splitLine: {
                show: !1
            },
            data: nameList
        }],
        series: [{
            name: '男',
            type: 'bar',
            barWidth: 5,
            stack: '总量',
            color: '#50a5ff',
            itemStyle: {
                //barBorderRadius: [15, 0, 0, 15]
            },
            emphasis: {
                itemStyle: {
                    // color: '#bd881f'
                }
            },
            data: value1List
        },
        {
            name: '女',
            type: 'bar',
            barWidth: 5,
            stack: '总量',
            color: '#49ff16',
            itemStyle: {
                //barBorderRadius: [0, 15, 15, 0]
            },
            emphasis: {
                itemStyle: {
                    // color: '#bd881f'
                }
            },
            data: value2List
        }
        ],
        noDataLoadingOption: {
            text: "暂无数据",
            effect: "whirling"
        }
    }

    const myChart = echarts.init(pieEchartsEL.value);
    myChart.setOption(option)

}

onMounted(() => {
    pieEchartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 90%;
    flex: 1;
    background-image: url('@/assets/images/dataScreen-main-lb.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5vw 0;

    .top {
        width: 100%;
        height: 20%;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .count {
            display: block;
            font-size: 1vw;
            font-weight: 550;
        }

        img {
            width: 5vw;
            height: 0.5vw;
        }
    }

    .main {
        width: 100%;
        height: 80%;

        .pieEcharts {
            width: 100%;
            height: 100%;
            // width: 500px;
            // height: 500px;
            // background-color: pink;
        }
    }
}
</style>